<template>
	<view class="searchPage">
		<!-- <cu-custom bgColor="my-theme-bg" :isBack="false">
            <block slot="backText">返回</block>
            <block slot="content">搜索页面</block>
        </cu-custom> -->

		<d-search-log :search_list_hot="search_list_hot" :type="'project'" :store_key="store_key"
			@onClickDelAllApi="onClickDelAll" @onSearchNameApi="onSearchName"></d-search-log>

		<view @click="projiectList" class="" style="
				display: flex;
				align-items: center;
				padding: 20px 10px 0 5%;
				background: #fff;
			">
			<!-- <u-section title="产业项目" sub-title="更多"></u-section> -->
			<view style="font-size: 14px; font-weight: 700; color: #14151a">
				推荐
				<image src="@/static/huo.png" style="width: 24rpx; margin-left: 7rpx" mode="widthFix"></image>
			</view>
		</view>
		<!--  -->
		<view class="teacherList">
			<view class="flex goods-box">
				<view class="mt10 goods-item" v-if="goods" v-for="(item, index) in goods" @click="goodsdetail(item.id)">
					<view class="bga box bg">
						<image :src="item.image" mode="widthFix" style="width: 100%"></image>
						<view style="display: flex; align-items: center; line-height: 30px" class="f16">
							<view class="lianghang c3" style="padding-right: 10px">
								{{ item.project_name }}
							</view>
							<view style="margin-left: auto">
								<u-icon name="star" size="30"></u-icon>
							</view>
						</view>
						<view class="f14 c6 lianghang ">
							<view class="goodsCont" v-html="item.project_desc">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
	</view>
</template>

<script>
	import dSearchLog from "@/uni_modules/d-search-log/components/d-search-log/d-search-logwc.vue";

	export default {
		components: {
			dSearchLog: dSearchLog,
		},
		computed: {},

		data() {
			return {
				// color_border:"#ff00ff",
				search_list_hot: [],
				store_key: "search_list",
				goods: []
			};
		},
		onLoad() {
			this.search_list_hot = [
				"手机",
				"电脑",
				"河南老君山",
				"三亚一游",
				"北京环球影城",
				"杭州西湖",
				"保定驴肉火烧",
				"保定狼牙山玻璃栈道",
			];
			this.getlist()
		},
		methods: {
			getlist() {
				uni.request({
					url: this.base_url+'/api/project/suggest',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						token: uni.getStorageSync('token')
					},
					data: {},
					success: res => {
						this.goods = res.data.data
						console.log(res);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goodsdetail(e) {
				uni.navigateTo({
					url: "/pages/index/project_list/detail?id=" + e,
				});
			},
			onClickDelAll() {
				console.log("[父级接收事件]：删除全部搜索记录");
			},
			onSearchName(e) {
				console.log("[父级接收事件]：点击搜索:" + e);
			},
		},
	};
</script>

<style lang="scss">
	.searchPage {
		min-height: 100%;
		background: #fff;
		padding-bottom: 130rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);


		.teacherList {
			padding: 0 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.teacher {
				width: 327rpx;
				// height: 390rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
				border-radius: 20rpx;
				margin-top: 30rpx;
				padding: 0 24rpx;

				.teacherImg {
					width: 170rpx;
					height: 170rpx;
					border-radius: 50%;
					display: block;
					margin: 20rpx auto 26rpx;
				}


				.teacherTel {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #333;

					.tel {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.teacherJj {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 33rpx;
					text-align: justify;
					font-style: normal;
					margin-top: 19rpx;
					padding-bottom: 23rpx;
				}
			}
		}

		.my-theme-bg {
			/* background: linear-gradient(117deg,#60DF9D,#31CB7B); */
			color: #fff;
			background: #ed861f;
			/* background: linear-gradient(117deg,#23C0F7,#ff661e); */
			/* background: linear-gradient(90deg, #FFAA57, #23C0F7); */
			/* background: linear-gradient(90deg, #F37749, #FFAA57); */
			/* #FFAA57 */
			/* background-image: linear-gradient(45deg, #39b54a, #8dc63f); */
			/* color: #ffffff; */
			/* background-color: #f37b1d; */
			/* color: #ffffff; */
			/* background-color: #ffffff; */
			/* color: #666666; */
			/* linear-gradient(-27deg, #33CB80, #28D0AF) */
			/* background-image: line=ar-gradient(-27deg,#33CB80,#28D0AF); */
			/* color: #ffffff; */
			/* background-image: line=ar-gradient(-27deg,#fff,#fff); */
			/* background-image: line=ar-gradient(-27deg,#23C0F7,#23C0F7); */
			/* color: #000; */
		}
	}

	.goods-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		background: #fff;
		margin-top: 30rpx;
	}

	.goods-item {
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
		padding: 20rpx;
		border-radius: 20rpx;
		width: 48%;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.goodsCont {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
</style>